<html>
<head>
<style>
body {
	min-width: 300px;
}
</style>
</head>
<body>
<script type="text/javascript">
function $(el) { return document.getElementById(el); }

function authorize() {
	chrome.extension.sendRequest({method: "authorize"}, function(response) {});
}

function updateCurrentLocation(latLng) {
	chrome.extension.sendRequest({method: "updateCurrentLocation", latLng: latLng}, function(response) {
		if (response.error && response.error.message) {
			if (response.error.message.indexOf("No oauth token or token secret") == 0) {
				$('lastKnownLocation').innerHTML = 'You need to <a href="#" onclick="authorize()">authorize this extension</a> to access and update your Google Latitude information.';
			} else {
				$('lastKnownLocation').innerHTML = 'An unknown error occured while trying to get or update your Google Latitude location: ' + response.error.message;
			}
			// Use the red icon; an error occurred.
			var icon_details = new Object();
			icon_details.path = 'icon.png';
			chrome.browserAction.setIcon(icon_details);
		} else if (response.currentLocation) {
			response.currentLocation.lastUpdated = new Date(response.currentLocation.lastUpdated);
			console.log("Last Known Latitude Location: ");
			console.log(response.currentLocation);
			$('lastKnownLocation').innerHTML = '';
			$('lastKnownLocation').innerHTML += "<strong>Last Known Latitude Location</strong><br/>";
			$('lastKnownLocation').innerHTML += "for <em>" + chrome.extension.getBackgroundPage().currentUser + "</em><br/>";
			if (response.currentLocation != null) {
				$('lastKnownLocation').innerHTML += "<br/>";
				$('lastKnownLocation').innerHTML += "<span style=\"float:right;padding-top:8px\">[<a href=\"#\" onclick=\"window.open('http://maps.google.com/?iwd=1&iwloc=A&q=Last+Google+Latitude+Known+Location@" + response.currentLocation.latitude + "," + response.currentLocation.longitude + "')\">See on map</a>]</span>";
				$('lastKnownLocation').innerHTML += "Latitude: " + response.currentLocation.latitude + "<br/>";
				$('lastKnownLocation').innerHTML += "Longitude: " + response.currentLocation.longitude + "<br/>";
				$('lastKnownLocation').innerHTML += "Accuracy: " + (response.currentLocation.accuracy ? response.currentLocation.accuracy + 'm' : 'Unknown')  + "<br/>";
				$('lastKnownLocation').innerHTML += "<br/>Last Updated: " + response.currentLocation.lastUpdated.toDateString() + ' ' + response.currentLocation.lastUpdated.toLocaleTimeString() + "<br/>";
			} else {
				$('lastKnownLocation').innerHTML += "<br/><em>Unknown</em>";
			}
			$('manualUpdate').style.display = 'block';
		} else {
			$('lastKnownLocation').innerHTML = 'Log in on <a href="#" onclick="window.open(\'https://www.google.com/accounts/Login\')">google.com</a> to start using the <em>Google Latitude Updater for Chrome</em> extension.';
		}
	});
}
updateCurrentLocation();

function manualCheckIn() {
	$('manualUpdateForm').style.display = 'none';
	$('manualUpdateFormStatus').style.display = 'block';
	$('manualUpdateFormStatus').innerHTML = 'Updating location...';
	chrome.extension.sendRequest({method: "codeAddress", address: $('address').value}, function(response) {
		if (response && response.latLng) {
			updateCurrentLocation(response.latLng);
			$('manualUpdateFormStatus').innerHTML = '<em>Location updated.</em>';
		} else {
			$('manualUpdateFormStatus').innerHTML = '<em>Error while updating location.</em>';
		}
	});
}
</script>
<div id="lastKnownLocation">
</div>
<br/>
<div id="manualUpdate" style="display:none">
	<input type="button" value="Manually Check-in..." onclick="$('manualUpdateForm').style.display = 'block'; $('manualUpdateFormStatus').style.display = 'none'; $('manualUpdate').style.display = 'none';" />
</div>
<div id="manualUpdateForm" style="display:none">
	<input type="text" name="address" id="address" value="[Enter an address]" onfocus="if (this.value='[Enter an address]') { this.value = ''; }" />
	<input type="button" value="Check-in" onclick="manualCheckIn()" />
</div>
<div id="manualUpdateFormStatus" style="display:none">
</div>
</body>
</html>